<template>
<el-container>
    <el-header style="text-align: left; font-size: 45px;">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 45px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>新增</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    
    <el-main>
      <el-table :data="columnListPage.filter(data => !search || data.articleTitle.toLowerCase().includes(search.toLowerCase()))" v-loading="listLoading" border height="100%">
        <el-table-column prop="id" label="Id" width="60" fixed="left"></el-table-column>
        <el-table-column prop="articleId" label="专栏Id" width="120" fixed="left"></el-table-column>
        <el-table-column prop="userName" label="投稿用户" width="120"></el-table-column>
        <el-table-column prop="articleTitle" label="资源标题" width="140"></el-table-column>
        <!-- <el-table-column prop="resourceUrl" label="资源所在URL" width="200"></el-table-column>
        <el-table-column prop="resourceCategory" label="资源类别" width="100"></el-table-column>
        <el-table-column prop="resourceCover" label="资源封面URL" width="200"></el-table-column> -->
        <el-table-column prop="tag1Name" label="标签1" width="120"></el-table-column>
        <el-table-column prop="tag2Name" label="标签2" width="120"></el-table-column>
        <el-table-column prop="tag3Name" label="标签3" width="120"></el-table-column>
        <el-table-column prop="tag4Name" label="标签4" width="120"></el-table-column>
        <el-table-column prop="tag5Name" label="标签5" width="120"></el-table-column>
        <el-table-column prop="publish" label="推送状态" width="120"></el-table-column>
        <!-- <el-table-column prop="name" label="注册时间" width="120"></el-table-column> -->
        <el-table-column align="right" width="240" fixed="right">
            <!-- 报错的原因是vetur的eslint检查没有关闭 -->
            <template slot="header" slot-scope="scope">
                <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入资源标题搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
    </el-table-column>
      </el-table>

    <el-pagination v-show="total>0" 
        :total="total" 
        background 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[15, 30, 50, 100]"
        :page-count="pageCount" 
        :page.sync="listQuery.page" 
        :limit.sync="listQuery.limit" />

    </el-main>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <!-- <el-form-item label="Id" prop="id">
          <el-select v-model="temp.id" class="filter-item" placeholder="Please select">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="资源标题" prop="resourceTitle">
          <el-input v-model="temp.resourceTitle"/>
        </el-form-item>
        <el-form-item label="资源URL" prop="resourceUrl">
          <el-input v-model="temp.resourceUrl" />
        </el-form-item>
        <el-form-item label="资源类别" prop="resourceCategory">
          <el-input v-model="temp.resourceCategory"/>
        </el-form-item>
        <el-form-item label="资源封面" prop="resourceCover">
          <el-input v-model="temp.resourceCover"/>
        </el-form-item>
        <el-form-item label="标签1" prop="tag1Name">
          <el-input v-model="temp.tag1Name"/>
        </el-form-item>
        <el-form-item label="标签2" prop="tag2Name">
          <el-input v-model="temp.tag2Name"/>
        </el-form-item>
        <el-form-item label="标签3" prop="tag2Name">
          <el-input v-model="temp.tag2Name"/>
        </el-form-item>
        <el-form-item label="标签4" prop="tag2Name">
          <el-input v-model="temp.tag2Name"/>
        </el-form-item>
        <el-form-item label="标签5" prop="tag2Name">
          <el-input v-model="temp.tag2Name"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>

  </el-container>
</template>

<script>
import {setCookie,getCookie} from '../../assets/js/cookie.js'//../上行目录；./当前目录
import {fetchList,fetchArticle} from '@/api/article.js'
export default {
    created(){
      this.checkLogin()
    },
    mounted(){

    },
    data(){
        return{
            columnList:[],
            columnListPage:[],
            search:'',
            tableData:[],
            total:0,
            currentPage:1,
            pageCount:10,
            pageSize:10,
            pageVal:1,
            listQuery: {
              page: 1,
              limit: 10,
              importance: undefined,
              title: undefined,
              type: undefined,
              sort: '+id'
            },
            listLoading:false,
            textMap:{
              update:'编辑',
              create:'创建'
            },
            temp:{
                articleTitle:'',
                // resourceUrl:'',
                articleCategory:'',
                articleCover:'',
                tag1Name:'',
                tag2Name:'',
                tag3Name:'',
                tag4Name:'',
                tag5Name:'',
                publish:'',
            },
            dialogFormVisible:false,
            dialogStatus:'',
            warningAlertVisible:'false',
        }
    },
    methods:{
        //检测是否登录
        checkLogin(){
          if(getCookie('adminAccount').length !=0){
            this.getList()
          }else{
            this.$router.replace({path:'/login'})
          }
        },
        getList(){
            this.listLoading = true
            fetchList().then(response =>{
                this.columnList = response.data
                this.tableData = this.columnList
                // this.resourceListPage = this.resourceList.splice(0,10)
                this.total = this.columnList.length
                console.log(this.columnList.length)
                console.log(response.data)
                console.log(this.tableData)
                var val = 1
                this.handleCurrentChange(val)
                setTimeout(() =>{
                    this.listLoading = false
                },1.5 * 1000)
            })
        },
      // 每页的条目数
      handleSizeChange(val){
        console.log('每页'+{val}+'条')
            this.getList()
        },
        //跳转到某一页时的逻辑操作
      handleCurrentChange(val){
            console.log('当前在第'+val+'页')
            console.log(val)
            this.pageVal=val
            console.log(this.pageVal)
            if(this.pageVal==1){
                this.columnListPage=this.columnList.slice(0,this.pageVal*this.pageSize)
                console.log(this.columnListPage)
                console.log("if生效")
            }else{
                this.columnListPage=this.columnList.slice((this.pageVal-1)*this.pageSize,this.pageVal*this.pageSize)
                console.log(this.columnListPage)
                console.log("else生效")
            }
            // this.resourceInformation=this.allResourceInformation.slice(10,20)
            console.log(this.columnList)
            // this.getSearchResult()
        }
    }
}
</script>

<style scoped>

</style>